<!DOCTYPE html>
<html lang="zh-CN" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <style>
        body {
            margin: 0;
            background: rgb(239,239,239);
            -webkit-transform-origin: 0 0;
            -webkit-transform:rotate(0deg);
        }
        .container{
            padding: 16px;
            width: calc(100% - 32px);
            background:white;
            /* background-image: url("/img/danjubg.png"); */
            background-size:auto;
            background-repeat: no-repeat;
            background-position-x: 50%;
            background-position-y: 50%;
        }

        /*作废水印*/
        .custom-container {
            position: relative;
        }
        .zuofei {
            width: 30%;
            height: 40px;
            font-size: 22px;
            font-weight: 700;
            color: red;
            border: 4px solid red;
            line-height: 40px;
            text-align: center;
            position: absolute;
            top: calc(50% - 40px);
            left: calc(50% - 40px);
        }
        .div1{
            display: flex;
            align-items: center;
            padding-left: 28%;
        }
        .div1 .div1-1{
            margin-right: 10px;
        }
        .div1 .div1-1 .span1{
            font-size: 12pt;
            font-family: Source Han Serif CN;
        }
        .div1 .div1-1 .span2{
            font-size: 8pt;
            font-family: 黑体;
        }
        .div1 .div1-1 .span3{
            font-size: 12pt;
            font-family: 黑体;
        }
        .div1 .div1-2{
            margin-right: 10px;
            font-size: 8pt;
        }
        .div1 .div1-3{
            font-size: 8pt;
        }
        .div2{
            border: 2px black solid;
            padding: 10px 16px 10px 16px;
            margin-bottom: 16px;
        }
        .div2 .div2-1{
            display: flex;
            align-items: center;
        }
        .div2 .div2-1 .div2-1-1{
            margin-right: 16px;
            min-width: 50px;
            font-size: 10pt;
        }
        .div2 .div2-1 .div2-1-2{
            border-bottom: 1px black solid;
            width: 100%;
            padding: 10px 20px 10px 0px;
            font-size: 8pt;
        }
        .div2 .div2-2{
            display: flex;
            align-items: center;
            margin-bottom: 2px;
        }
        .div2 .div2-2 .div2-2-1{
            margin-right: 16px;
            min-width: 50px;
            font-size: 10pt;
        }
        .div2 .div2-2 .div2-2-2{
            border-bottom: 1px black solid;
            width: 100%;
            padding: 10px 20px 10px 0px;
            font-size: 8pt;
        }
        .div2 .div2-3{
            display: flex;
            align-items: center;
            margin-bottom: 2px;
        }
        .div2 .div2-3 .div2-3-1{
            margin-right: 16px;
            min-width: 50px;
            font-size: 10pt;
        }
        .div2 .div2-3 .div2-3-1 .div2-3-1-1{
        }
        .div2 .div2-3 .div2-3-1 .div2-3-1-2{
            min-width: 50px;
            font-size: 8pt;
        }
        .div2 .div2-3 .div2-3-2{
            display: flex;
            align-items: center;
        }
        .div2 .div2-3 .div2-3-2 .div2-3-2-1{
            border-bottom: 1px black solid;
            min-width: 150px;
            padding: 10px 20px 10px 0px;
            font-size: 8pt;
            margin-right: 10px;
        }
        .div2 .div2-3 .div2-3-2 .div2-3-2-2{
            padding: 10px 4px 10px 0px;
            font-size: 8pt;
        }
        .div2 .div2-3 .div2-3-2 .div2-3-2-3{
            border-bottom: 1px black solid;
            min-width: 10px;
            padding: 10px 4px 10px 0px;
            font-size: 10pt;
            margin-right: 10px;
            font-size: 8pt;

        }
        .div2 .div2-3 .div2-3-2 .div2-3-2-4{
            padding: 10px 20px 10px 0px;
            font-size: 8pt;
        }
        .div3{
            display: flex;
            align-items: center;
            font-size: 8pt;
            position: relative;
        }
        .div3 .div3-1{
            display: flex;
            align-items: center;
            margin-right: 100px;
        }
        .div3 .div3-1 .square-checkbox{
            background: none;
        }
        .div3 .div3-2{
        }
        .div3 .div3-3{
            width: 115px;
            height: 115px;
            position: absolute;
            right: 0px;
            top: -75px;
        }

        .djfbtn{
            padding:0px 6px;
            border-radius: 6px;
            color: #4385F3;
            box-sizing: border-box;
            border: 1px solid #4385F3;
            background: none;

        }
        /* 添加下载按钮样式 */
        .download-btn {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
            color: white;
            border: none;
            padding: 4px 15px;
            font-size: 14px;
            font-weight: 600;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            outline: none;
            margin-left: 10px;
        }

        .download-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .download-btn:active {
            transform: translateY(0);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        .download-btn2 {
            background: blue;
        }
        .center{
            text-align: center;
            color: red;
            margin-bottom: 20px;
        }
        .back-btn {
            background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
            color: white;
            border: none;
            padding: 4px 15px;
            font-size: 14px;
            font-weight: 600;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            outline: none;
            margin-left: 10px;
        }

        .back-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        .back-btn:active {
            transform: translateY(0);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        /* 按钮容器 */
        .button-container {
            text-align: center;
            margin: 20px 0;
        }
        .rightbtncon{
            display: flex;
            justify-content: flex-end;

        }
        .whitediv{
            background: white;
        }

    </style>
    <title>收据</title>

</head>
<body>
<div class="whitediv">
    <button class="back-btn" onclick="goBack()">返回</button>
</div>

<div class="container" id="receipt-content">

    <div id="wechat-tip" style="display: none;" class="center">点击右上角菜单选择"在浏览器中下载PDF</div>
    <div class="rightbtncon">
        <button id="download-btn" class="download-btn" onclick="downloadPDF()" style="display: none;">下载PDF</button>

    </div>


<div class="div1">
    <div class="div1-1"><span class="span1">收 </span><span class="span2">OFFICIALRECEIPT</span><span class="span3"> 据</span></div>
    <div class="div1-2">
        <div class="div1-2-1">凭证号码</div>
        <div class="div1-2-2">出据日期</div>
    </div>
    <div class="div1-3">
        <div class="div1-3-1">1</div>
        <div class="div1-3-2">1</div>
    </div>
</div>
<div class="div2 custom-container" >
    <div class="zuofei" >
        作废
    </div>

    <div class="div2-1">
        <div class="div2-1-1">兹收到</div>
        <div class="div2-1-2">1 &nbsp; 1</div>
    </div>
    <div class="div2-2">
        <div class="div2-2-1">交&nbsp;&nbsp;&nbsp;&nbsp;来</div>
        <div class="div2-2-2">
            <span >100 </span>
        </div>
    </div>
    <div class="div2-3">
        <div class="div2-3-1">
            <div class="div2-3-1-1">人民币</div>
            <div class="div2-3-1-2">(金额大写)</div>
        </div>
        <div class="div2-3-2">
            <div id="daxiejine" class="div2-3-2-1"> 元 角 分</div>
            <div class="div2-3-2-2">￥:</div>
            <div class="div2-3-2-3">120.00</div>
            <div class="div2-3-2-4">元</div>
        </div>
    </div>
</div>
<div class="div3">
    <div class="div3-1">
        <input type="checkbox" class="square-checkbox" disabled/>现金
        <input type="checkbox" class="square-checkbox" checked="checked" disabled/>微信
        <input type="checkbox" class="square-checkbox" disabled/>支付宝
    </div>
    <div class="div3-2">收款单位:河南交通技师学院</div>
    <img class="div3-3" src="img/zhang1.png" />
</div>


</div>
</body>
<script src="js/jquery.min.js"></script>
<!--<script src="/js/html2pdf.bundle.min.js"></script>-->
<script src="js/jspdf.umd.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script type="text/javascript">

    function isWechatBrowser() {
        var ua = navigator.userAgent.toLowerCase();
        return ua.includes('micromessenger');
    }

    // 页面加载完成后判断显示哪个元素
    document.addEventListener('DOMContentLoaded', function() {
        if (isWechatBrowser()) {
            // 在微信环境中，显示提示信息
            document.getElementById('wechat-tip').style.display = 'block';
        } else {
            // 非微信环境，显示下载按钮
            document.getElementById('download-btn').style.display = 'block';
        }
    });
  // 替换原有的downloadPDF函数
function downloadPDF() {
    const element = document.getElementById('receipt-content');

    // 临时隐藏不需要打印的元素
    const downloadBtn = document.querySelector('.download-btn');
    const backBtn = document.querySelector('.back-btn');

    if (downloadBtn) downloadBtn.style.display = 'none';
    if (backBtn) backBtn.style.display = 'none';

    // 使用html2canvas截图
    html2canvas(element, {
        scale: 2,
        useCORS: true,
        backgroundColor: '#ffffff'
    }).then(canvas => {
        // 恢复按钮显示
        if (downloadBtn) downloadBtn.style.display = 'block';
        if (backBtn) backBtn.style.display = 'block';

        const imgData = canvas.toDataURL('image/png');
        const pdf = new jspdf.jsPDF({
            orientation: 'portrait',
            unit: 'mm',
            format: 'a4'
        });

        const imgWidth = 210; // A4宽度
        const pageHeight = 297; // A4高度
        const imgHeight = canvas.height * imgWidth / canvas.width;
        let heightLeft = imgHeight;
        let position = 0;

        pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;

        // 如果内容高度超过一页，则添加新页面
        while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            pdf.addPage();
            pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
        }

        // 保存PDF文件
        pdf.save('收据.pdf');
    });
}





    function goBack() {
        window.history.back();
    }
    function convertCurrencyToChinese(currencyDigits) {
        // 基础数字数组
        var digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
        // 小数单位数组
        var decimals = ['分', '角'];
        // 整数部分转换
        var parts = currencyDigits.toString().split('.');
        var integerPart = parts[0];
        var decimalPart = parts[1] ? parts[1].substr(0, 2) : ''; // 只取前两位小数
        var chineseInteger = '';
        var chineseDecimal = '';
        // 整数部分转换
        for (var i = 0; i < integerPart.length; i++) {
            var digit = integerPart[i];
            var unit = integerPart.length > 10 ? '万' : ''; // 超过10位的数字用万作为单位
            var isZero = digit === '0';
            var isNotZeroInMillion = integerPart.length > 8 && integerPart[integerPart.length - 9] !== '0';
            if (isZero && (isNotZeroInMillion || integerPart.length < 9)) {
                unit = ''; // 万位如果为零则不需要单位
            }
            chineseInteger += digits[parseInt(digit)] + unit;
        }
        // 小数部分转换
        for (var j = 0; j < decimalPart.length; j++) {
            chineseDecimal += digits[parseInt(decimalPart[j])] + decimals[j];
        }
        // 拼接最终结果
        var result = chineseInteger + chineseDecimal;
        // 处理特殊情况如零元
        if (result === '零分') {
            result = '零';
        }
        return result;
    }

    /*金额小写转大写*/
    function smalltoBIG(n) {
        var fraction = ['角', '分'];
        var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
        var unit = [
            ['元', '万', '亿'],
            ['', '拾', '佰', '仟']
        ];
        var head = n < 0 ? '欠' : '';
        n = Math.abs(n);

        var s = '';

        for (var i = 0; i < fraction.length; i++) {
            s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
        }
        s = s || '整';
        n = Math.floor(n);

        for (var i = 0; i < unit[0].length && n > 0; i++) {
            var p = '';
            for (var j = 0; j < unit[1].length && n > 0; j++) {
                p = digit[n % 10] + unit[1][j] + p;
                n = Math.floor(n / 10);
            }
            s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
        }
        var value = head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
        return value.replace("元整", "");
    }

    /*限制只能保留两位小数点*/
    function num(val) {
        //val = val.replace(/[\u4e00-\u9fa5]/g, ""); //清除中文
        val = val.replace(/[^\d.]/g, ""); //清除"数字"和"."以外的字符
        val = val.replace(/^\./g, ""); //验证第一个字符是数字
        val = val.replace(/\.{2,}/g, "."); //只保留第一个, 清除多余的
        val = val.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
        return val;
    }

    // 使用示例
    $(document).ready(function() {
        var amount = 100;
        var chineseAmount = smalltoBIG(amount);
        $("#daxiejine").html(chineseAmount);
    });
</script>
</html>
